<template>
  <div class="app-container">
    <el-row class="head">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <el-col :span="3">
          <el-form-item
            class="first-form"
            style="width: 270px"
            label="数据表名:"
            prop="tableName"
          >
            <el-input
              v-model="queryParams.tableName"
              placeholder="请输入数据表名"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="9" :push="2">
          <el-form-item class="first-form" label="创建时间:" prop="tableName">
            <el-date-picker
              style="width: 240px"
              v-model="selDataTime"
              type="daterange"
              value-format="yyyy-M-d"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              size="small"
            ></el-date-picker
          ></el-form-item>
        </el-col>
        <el-col :span="4" :push="3">
          <el-form-item class="caoz">
            <el-button
              class="search-btn"
              type="danger"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              class="reset-btn"
              icon="el-icon-refresh-right"
              size="small"
              @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="4" :push="4">
          <el-form-item class="caoz1">
            <el-button
              class="search-btn1"
              type="primary"
              size="small"
              @click="connectInput"
              >关系库输入</el-button
            >
            <el-button class="reset-btn1" size="small" @click="showFileInput"
              >文件输入</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row class="card-list" v-loading="loading">
      <div class="card-title">原始数据表</div>
      <el-col :span="6" v-for="(o, index) in scckocMetaList" :key="index">
        <el-card shadow="never" class="data-card" :body-style="{ padding: 0 }">
          <div style="font-size: 18px; font-weight: bold">
            {{ o.tableName }}
          </div>
          <div class="card-img"></div>
          <div class="dn-card">
            {{ o.createTime }} {{ o.createBy == null ? "admin" : o.createBy }}
          </div>
          <div :class="'card-state' + (o.schemaId + 3)">
            {{ cardName[o.schemaId - 1] }}
          </div>
          <div class="caozuo">
            <el-link :underline="false" type="primary" @click="handleUpdate(o)"
              >{{ " " }}详情{{ " " }}</el-link
            >
            <el-link
              :underline="false"
              :type="o.dataState != 2 && o.dataState != 1 ? 'primary' : 'info'"
              :disabled="o.dataState == 2 || o.dataState == 1"
              @click="addClear(o)"
              >{{ " " }}清洗{{ " " }}|</el-link
            >
            <!-- </el-col> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      layout="prev, pager, next"
      @pagination="getList"
    />

    <!-- 清洗对话框 -->
    <el-dialog
      :visible.sync="open"
      width="480px"
      append-to-body
      class="del-dialog"
    >
      <div class="del-msg">
        <div class="msg1">
          确认将<span>{{ dialogTableName }}</span
          >加入清洗流程吗？
        </div>
        <div class="msg3" style="margin-top: 10px">
          待清洗数据表名称为
          <span>{{ addClearName }}_{{ addClearCount + 1 }}</span>
        </div>
        <div class="msg3">请在待清洗列表中查看</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="cancel">取 消</el-button>
        <el-button class="commit" type="primary" @click="addClearIndex"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 删除对话框 -->
    <el-dialog
      :visible.sync="delShow"
      width="480px"
      append-to-body
      class="del-dialog"
    >
      <div class="del-img"></div>
      <div class="del-msg">
        <div class="msg1">
          确认要删除<span>{{ dialogName }}</span
          >吗？
        </div>
        <div class="msg2">删除后数据不可恢复！请谨慎操作！</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="cancel">取 消</el-button>
        <el-button class="commit" type="primary" @click="handleDelete"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 文件输入对话框 -->
    <el-dialog
      width="648px"
      :visible.sync="uploadVisibile"
      class="file-input"
      title="文件输入"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <div class="tilite_style">(单文件添加,再次添加文件覆盖前一个文件)</div>

        <el-form-item label="*上传文件:">
          <input
            ref="file"
            id="file"
            type="file"
            @change="getFile($event)"
            style="display: none"
          />

          <el-button
            class="upload-demo"
            size="small"
            icon="el-icon-plus"
            @click="uploadTableData()"
            >添加文件</el-button
          >
          <span
            v-if="this.uploadFileData.dataSource != null"
            class="uploadData"
          >
            已上传文件:
          </span>
          <span class="uploadData">{{ this.uploadFileData.dataSource }}</span>
        </el-form-item>

        <el-form-item label="*选择模板:">
          <!-- <el-input v-model="uploadFileData.templateId" placeholder="请输入匹配模版"></el-input> -->
          <el-select
            class="md"
            v-model="uploadFileData.templateId"
            placeholder="请选择"
            @change="getfileNameById"
          >
            <el-option
              v-for="(item, index) in cfgList"
              :key="index"
              :label="item.templateName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0" v-if="uploadFileData.templateId != null">
          <el-row type="flex" justify="start">
            <el-col :span="9">
              <el-form-item label="*起始行:">
                <el-input
                  v-model="uploadFileData.firstLine"
                  placeholder="请输入"
                  clearable
                  size="small"
                  class="line"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="*结束行:">
                <el-input
                  v-model="uploadFileData.endLine"
                  placeholder="请输入"
                  clearable
                  size="small"
                  class="line"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          label="文件名:"
          v-if="this.uploadFileData.templateId != null"
        >
          <!-- 这个没办法 -->

          {{ this.fileName }}
        </el-form-item>
        <el-form-item label="文件名:" v-else> </el-form-item>
        <el-form-item
          label="数据结构:"
          v-if="uploadFileData.templateId != null"
        >
          <div class="file-table" v-if="uploadFileData.templateId != null">
            <el-table
              max-height="164px"
              :data="cfgziduan[this.fileTableName]"
              border
              size="mini"
              :header-cell-style="{ 'font-size': '14px' }"
              style="width: 100%; font-size: 14px"
            >
              <el-table-column
                label="字段名称"
                width="140"
                fixed
                align="center"
                prop="ziduanName"
              />
              <el-table-column
                label="类型"
                width="150"
                fixed
                align="center"
                prop="ziduanType"
              />
              <el-table-column
                label="长度"
                width="100"
                fixed
                align="center"
                prop="ziduanSize"
              />
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click="
            uploadVisibile = false;
            fileMd = null;
          "
          >取消</el-button
        >
        <el-button
          style="margin-top: 40px"
          class="commit"
          type="primary"
          @click="uploadFile"
          >输入</el-button
        >
      </div>
    </el-dialog>
    <!-- 关系库输入对话框 -->
    <el-dialog
      :visible.sync="connectShow"
      width="800px"
      append-to-body
      class="connect-dialog"
      @close="clearCheckData()"
    >
      <el-steps :active="active" finish-status="success">
        <el-step title="选择输入数据"></el-step>
        <el-step title="输入数据预览"></el-step>
        <el-step title="选择输入字段"></el-step>
      </el-steps>
      <div class="cd-body" v-show="active == 0">
        <div class="cd">
          <span>*选择数据源:</span>
          <el-select v-model="dataSourceSel" placeholder="请选择">
            <el-option
              v-for="(item, index) in dataSpurceMD"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </div>
        <div class="cd">
          <span>*选择数据表:</span>
          <el-select v-model="dataTableSel" placeholder="请选择">
            <el-option
              v-for="(item, index) in dataTable"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </div>
        <div class="cd">
          <span>*选择模板:</span>
          <el-select
            v-model="templateSel"
            placeholder="请选择"
            @change="getfileNameById"
          >
            <el-option
              v-for="(item, index) in listTemp"
              :key="index"
              :label="item.templateName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="cd">
          <span>文件名:</span>
          <span class="file-name">{{ this.fileName }}</span>
        </div>
      </div>
      <div class="cd-body" v-show="active == 1">
        <div class="cd-table1">
          <el-table
            :data="dataPreview"
            max-height="265px"
            border
            :header-cell-style="{ 'font-size': '17px', height: '35px' }"
            style="width: 877px; font-size: 14px; margin: 0px"
          >
            <el-table-column
              :prop="item"
              :label="item"
              align="center"
              min-width="150%"
              class="over_style"
              :fixed="item == 'id' ? true : false"
              v-for="(item, index) in headerPreview"
              :key="index"
            >
            </el-table-column>
            <!-- <template slot-scope="scope">
              <el-tooltip placement="right">
                <div class="textshow" slot="content">
                  {{ scope.row.problemDescription }}
                </div>
                <span class="text">
                  {{ scope.row.problemDescription }}
                </span>
              </el-tooltip>
            </template> -->
          </el-table>
        </div>
      </div>
      <div class="cd-body" v-show="active == 2">
        <div class="cd-table2">
          <el-table
            :data="tableColumn"
            border
            @selection-change="selectDbRow"
            :header-cell-style="{ 'font-size': '17px' }"
            style="width: 100%; font-size: 17px"
          >
            <el-table-column type="selection" align="center" fixed />
            <el-table-column
              label="字段名称"
              fixed
              align="center"
              prop="COLUMN_NAME"
            />
            <el-table-column
              label="类型"
              fixed
              align="center"
              prop="COLUMN_TYPE"
            />
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="active > 0" class="cancel" @click="activeBack"
          >上一步</el-button
        >
        <el-button class="commit" type="primary" @click="connectNext()">{{
          active &lt; 2 ? "下一步" : "确 定"
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 关系库模板错误 -->
    <el-dialog
      title="提示"
      :visible.sync="errorIn"
      width="30%"
      class="del-dialog"
    >
      <!-- <div class="del-img"></div> -->

      <br />
      <div
        class="del-msg"
        v-if="MsgeErrorIn != ''"
        style="
          display: flex;
          flex-direction: column-reverse;
          align-items: flex-start;
          margin-left: 150px;
        "
      >
        <div v-for="(item, index) in MsgeErrorIn" :key="index" class="msg1">
          错误字段: <span>{{ item }}</span>
        </div>
      </div>
      <div
        v-else
        class="msg1"
        style="
          text-align: center;
          font-size: 18px;
          color: #333333;
          font-weight: bold;
          margin-top: 30px;
        "
      >
        未勾选要导入系统的清洗列
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="MsgeErrorIn == ''"
          type="primary"
          @click="errorIn = false"
          class="commit"
          style="margin-top: 10px"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          @click="errorIn = false"
          class="commit"
          style="margin-top: 10px"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="errorOutIn"
      width="30%"
      class="del-dialogOutIn"
    >
      <br />
      <div class="del-dialogOutIn-Msg">
        <div style="font-size: 18px">{{ MsgeError }}</div>
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
          "
        >
          <div
            class="del-msg"
            v-for="(item, index) in MsgeErrorData"
            :key="index"
          >
            <span style="font-size: 16px; color: red; margin_top: 10px">
              <span class="msg1" style="color: black">错误字段：</span
              >{{ item }}
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="errorOutIn = false" class="commit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 
    文件模板错误
    <el-dialog title="提示" :visible.sync="errorIn" width="30%">
      <span>导入与模板不匹配</span>
      <div>{{ this.MsgeError }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="errorIn = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  uploadScckocMeta,
  clearScckocMeta,
  listScckocMeta,
  getDataSource,
  getTableInfoByDb,
  delScckocMeta,
  addScckocMeta,
  updateScckocMeta,
  exportScckocMeta,
  getfileName,
} from "@/api/scckocMeta/scckocMeta";
import { listCfg } from "@/api/template/cfg";
import {
  queryDbByTName,
  queryTableColumnInfo,
  listTemplate,
  moveToClear,
  copyTable,
  findTable,
} from "@/api/burnPower/interface";
export default {
  name: "ScckocMeta",
  data() {
    return {
      //中文名
      cardName: [
        "物种",
        "动力学",
        "实验高温热物性",
        "",
        "",
        "热力学",
        "层级火焰",
        "点火延迟",
        "输运",
        "物种浓度",
        "其他",
      ],
      MsgeErrorIn: [],
      //模板错误弹窗
      errorIn: false,
      //模糊查询日期
      selDataTime: null,
      //导入清洗count
      addClearCount: 0,
      //导入清洗表名字
      addClearName: "",
      // 步骤条
      active: 0,
      // 选择数据源
      dataSourceSel: 0,
      dataSpurceMD: [],
      // 选择数据表
      dataTableSel: 0,
      dataTable: [],
      // 选择模板
      templateSel: 1,
      listTemp: [],
      // 预览数据
      dataPreview: [],
      headerPreview: [], //表头信息
      // 表结构
      tableColumn: [],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 导入遮罩层
      uploadLoading: false,
      // 选中数组
      ids: [],
      //basic模板对象
      basicArr: {},
      //dynamic_info模板对象
      dynamicArr: {},
      //density模板对象
      densityArr: {},
      //rmg模板对象
      rmgArr: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库的元数据表格数据
      scckocMetaList: [],
      // 弹出层标题
      title: "",
      // 是否显示导入文件弹窗
      uploadVisibile: false,
      // 是否显示弹出层
      open: false,
      //关系库导入勾选
      selection: [],
      //关系库对象接收
      StrSelection: [],
      //判断模板
      ifList: [],
      //文件输入错误提示
      MsgeErrorData: [],
      errorOutIn: false,
      delShow: false,
      delId: null,
      connectShow: false,
      delDialog: null,
      dialogName: "",
      dialogTableName: "",
      cfgList: [],
      cfgziduan: [],
      fileTableName: "",
      cfgtotal: 0,
      fileMd: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        tableName: null,
        schemaId: null,
        total: null,
        dataState: null,
        dataSource: null,
        dataType: "R",
        storeLoc: null,
        createrId: null,
      },
      //模板名数组(用于查文件预估名)
      templateCounts: {
        basicInfo: 1,
        dynamic_info: 2,
        density: 3,
        rmg: 4,
        basic: 5,
      },

      MsgeError: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      cardState: ["待清理", "已发布", "自动清理中", "待发布"],
      //导入数据信息
      uploadFileData: {
        templateId: null,
        templateName: "",
        createId: null,
        dataSource: null,
        firstLine: 0,
        endLine: 10,
      },
      //模板名
      fileName: "",
    };
  },
  created() {
    this.getList();
    // console.log("data", headerPreview);
  },
  watch: {
    dataSourceSel: function (newval, oldval) {
      this.selectTable(this.dataSpurceMD[newval]);
    },
    dataTableSel: function (newval, oldval) {
      // this.getClearData(this.dataTable[newval], 1, 11);
      console.log("this.dataTable", this.dataTable[newval]);
      this.getTableCol(
        this.dataSpurceMD[this.dataSourceSel],
        this.dataTable[newval]
      );
    },
  },
  methods: {
    //获取表名
    getfileNameById(val) {
      getfileName(val)
        .then((res) => {
          this.fileName = res;
          this.fileTableName = res;
        })
        .then(() => {
          let a = this.fileName.lastIndexOf("_");
          this.fileTableName = this.fileTableName.slice(0, a);
          console.log(this.fileTableName, "fileTableName", a);
        });
    },
    //上传方法
    uploadTableData() {
      this.$refs.file.click();
      // console.log("fileclick", this.$refs.file);
    },
    getFile(obj) {
      this.uploadFileData.dataSource = document
        .querySelector("#file")
        .files[0].name.split(".")[0];
      // console.log("uploadFileData", this.uploadFileData);
      // console.log("obj", obj);
      // console.log("file", document.querySelector("#file"));
      console.log(this.uploadFileData.dataSource, "dataSource");
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },

    //获取上传文件名
    uploadInputFileByFileNameV5() {
      console.log(uploadFileData.templateId);
    },
    /** 查询库的元数据列表 */
    getList() {
      this.loading = true;
      listScckocMeta(this.queryParams).then((response) => {
        this.scckocMetaList = response.data.rows;
        console.log(this.scckocMetaList, "scckocMetaList");
        this.total = response.data.total;
        this.loading = false;
      });
    },
    //预览数据
    getheaderPreview() {
      this.headerPreview = [];
      if (this.headerPreview.length == 0) {
        for (const key in this.dataPreview[0]) {
          this.headerPreview.push(key);
        }
      }
    },
    getClearData(table, page, size) {
      queryDbByTName(table, page, size).then((res) => {
        this.dataPreview = res.data;
        this.getheaderPreview();
      });
    },
    // 选择数据表
    selectTable(dataSource) {
      getTableInfoByDb(dataSource).then((response) => {
        // console.log(",,,,,,,,,,,,", response);
        this.dataTable = response.data;
      });
    },
    // 数据表结构
    getTableCol(db, table) {
      queryTableColumnInfo(db, table).then((res) => {
        this.tableColumn = res.data;
      });
    },
    // 模板列表
    getListTemplate() {
      let pageNum = -1;
      let pageSize = -1;
      listTemplate(pageNum, pageSize).then((res) => {
        this.listTemp = res.rows;
        console.log("this.listTemp", this.listTemp);
      });
    },

    // 打开关系库输入弹框
    connectInput() {
      this.connectShow = true;
      this.active = 0;
      this.dataTableSel = 0;
      this.dataTable[this.dataTableSel] = "";
      getfileName(1).then((res) => {
        this.fileName = res;
      });
      getDataSource().then((response) => {
        this.dataSpurceMD = [];
        this.dataSpurceMD.push(response.data);
        // console.log(".............", this.dataSpurceMD[0]);
        getTableInfoByDb(this.dataSpurceMD[0]).then((response) => {
          this.dataTable = response.data;
          console.log("22222222233333", this.dataTable);
          // this.getClearData(this.dataTable[0], 1, 11);

          this.getTableCol(this.dataSpurceMD[0], this.dataTable[0]);
          this.getListTemplate();
        });
      });
    },
    //从原始数据库导入到清洗数据库
    addClearIndex() {
      moveToClear(this.ids, 0).then(() => {
        this.$message.success("导入成功");
        this.open = false;
      });
    },

    // 打开文件输入弹窗
    showFileInput() {
      //重置
      // this.resetfeil();
      // this.reset();

      this.loading = true;
      this.uploadVisibile = true;

      listCfg().then((response) => {
        this.cfgList = response.rows;
        //解决文件名问题建的对象数组
        console.log("cfgList", this.cfgList);
        this.cfgtotal = response.total;
        this.cfgziduan = {};
        this.cfgList.forEach((item, index) => {
          var t = item.templateSchema;
          console.log("t", item, t);
          var ls = t.match(/(?<={).+?(?=})/g);
          var t2 = [];
          ls.forEach((val, idx) => {
            let zdlen = val.split(":")[0].replaceAll("'", "").split("|")[1];
            // console.log("11111111", zdlen);
            t2.push({
              ziduanName: val.split(":")[0].replaceAll("'", "").split("|")[0],
              ziduanType: val.split(":")[1].replaceAll("'", ""),
              ziduanSize: zdlen != undefined ? zdlen : "255",
            });
          });
          this.cfgziduan[item.templateName] = t2;
          console.log(t2, "t2");
        });
        this.uploadFileData.templateName = this.cfgList[0].templateName;
        this.loading = false;
      });
    },
    //关系库输入勾选
    selectDbRow(select) {
      console.log("select", select);
      let selectArr = [];
      for (let i = 0; i < select.length; i++) {
        selectArr[i] = select[i].COLUMN_NAME;
      }
      this.selection = selectArr;
      for (let i = 0; i < this.selection.length; i++) {
        i = this.selection.length - 1;
        this.selection[i] = this.selection[i].toLowerCase();
      }
      if (this.selection.length != 0) {
        if ("if" in this.selection === false) {
          this.selection.push("id");
        }
      }

      this.selection = Array.from(new Set(this.selection));

      this.StrSelection = JSON.stringify(this.selection);

      let reg = new RegExp('"', "g");
      this.StrSelection = this.StrSelection.replace(reg, "");
      this.StrSelection = this.StrSelection.replace("[", "");
      this.StrSelection = this.StrSelection.replace("]", "");
      this.StrSelection = this.StrSelection.toLowerCase();

      console.log(this.StrSelection, typeof this.StrSelection);
    },
    //关闭关系型数据库时清空数据
    clearCheckData() {
      this.templateSel = 1;
    },
    // 下一步的操作
    connectNext() {
      console.log("步骤", this.active);
      console.log("data", this.dataTableSel, this.templateSel);
      console.log(this.dataTable[this.dataTableSel]);

      this.getClearData(this.dataTable[this.dataTableSel], 1, 11);
      if (++this.active > 2) {
        this.active = 0;
        this.connectShow = false;
        let src = this.dataTable[this.dataTableSel];
        let tag = this.templateSel;
        let columns = this.StrSelection;
        let creatId = 0;
        // this.dataSpurceMD = [];
        copyTable(src, tag, columns, creatId)
          .then((res) => {
            if (res.status === 500) {
              this.errorIn = true;
              let arr = [];
              for (let i = 0; i < res.data.length; i++) {
                // console.log("是否是数组", res.data[i]);
                arr[i] = res.data[i];

                this.templateSel = 1;
              }
              console.log(arr);
              if (arr.length > 3) {
                for (let i = 0; i < 2; i++) {
                  this.MsgeErrorIn[i] = arr[i];

                  this.templateSel = 1;
                }
                this.MsgeErrorIn.push(arr[2] + "...");
              } else {
                for (let i = 0; i < arr.length; i++) {
                  this.MsgeErrorIn[i] = arr[i];
                }
              }
            } else {
              this.$message.success("导入成功");
              console.log("res.data2", res.data);
              this.getList();
              this.templateSel = 1;
            }
          })
          .catch((res) => {
            this.$message.success("导入失败,请校验文件结构");
            console.log(res.msg);
          });
        this.MsgeErrorIn = [];
        this.templateSel = 1;
      }
    },
    //上一步的操作
    activeBack() {
      this.active = this.active - 1;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.delShow = false;
      this.connectShow = false;
      this.active = 0;

      this.ids = [];
      this.dataSpurceMD = [];
      this.delId = null;
      this.reset();
    },
    // 表单重置
    reset() {
      this.selDataTime = null;
      this.form = {
        id: null,
        tableName: null,
        schemaId: null,
        total: null,
        dataState: null,
        dataSource: null,
        dataType: null,
        storeLoc: null,
        createTime: null,
        createrId: null,
      };

      this.resetForm("form");
    },
    //上传文件重置方法
    resetfeil() {
      this.uploadFileData = {
        templateId: null,
        templateName: "",
        createId: null,
        dataSource: null,
        firstLine: 0,
        endLine: 10,
      };
    },
    //修改table(数据保存列样式)
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "数据保存位置") {
        return "font-size: 15px"; // 修改的样式
      } else {
        return "";
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      let createTime = null;
      let data = JSON.stringify(this.selDataTime);
      let reg = new RegExp('"', "g");
      data = data.replace(reg, "");
      data = data.replace("[", "");
      createTime = data.replace("]", "");
      let table = JSON.stringify(this.queryParams.tableName);
      table = table.replace(reg, "");
      let state = JSON.stringify(this.queryParams.dataState);
      let page = this.queryParams.pageNum;
      console.log("time", data);
      let size = this.queryParams.pageSize;
      console.log("get :", this.queryParams);
      let type = "R";
      if (table === "" || table === '""') {
        table = JSON.stringify(null);
      }
      console.log("您已上传创建人信息", table);
      findTable(table, createTime, type, page, size, state).then((res) => {
        this.scckocMetaList = res.rows;
        console.log(res, "scckocMetaList1");

        this.pageTotal = parseInt(res.total);

        console.log("dataState1: ", this.queryParams.dataState);
      });
    },
    resetQuery() {
      // this.resetForm("queryForm");
      // this.handleQuery();
      this.selDataTime = null;
      this.queryParams.tableName = "";
      let table = "null";
      let createTime = "null";
      let state = this.queryParams.dataState;
      let page = this.queryParams.pageNum;
      let size = this.queryParams.pageSize;
      console.log("get :", typeof createrId);

      let type = "R";
      console.log("您已上传创建人信息");
      findTable(table, createTime, type, page, size, state).then((res) => {
        this.scckocMetaList = res.rows;
        console.log(res, "scckocMetaList1");

        this.pageTotal = parseInt(res.total);

        console.log("dataState1: ", this.queryParams.dataState);
      });
    },
    /** 上传文件 */
    handlePreview(file) {
      console.log(file);
    },
    // TODO: 端口500错误
    uploadFile() {
      let file = document.querySelector("#file").files[0];
      if (this.uploadFileData.templateId == null || file == null) {
        this.$message.error("模板为空,或没有上传文件");
      } else {
        // this.$message.warning("文件上传中");
        let data = new FormData();
        data.append("file", file);
        data.append("templateId", this.uploadFileData.templateId);
        data.append("createId", 0);
        data.append("dataSource", this.uploadFileData.dataSource);
        data.append("firstLine", this.uploadFileData.firstLine);
        data.append("endLine", this.uploadFileData.endLine);
        uploadScckocMeta(data).then((res) => {
          if (res.status == 500) {
            this.errorOutIn = true;
            this.MsgeError = res.msg;
            this.MsgeErrorData = [];
            if (res.data != null) {
              if (res.data.length > 3) {
                for (let i = 0; i < 2; i++) {
                  this.MsgeErrorData[i] = res.data[i];
                }
                this.MsgeErrorData.push(res.data[3] + "...");
              } else {
                this.MsgeErrorData = res.data;
              }
            }
            console.log(this.MsgeError, this.MsgeErrorData);
          } else {
            this.$message.success("上传成功");
            this.getList();
            this.uploadVisibile = false;
          }
        });
        // .catch((res) => {
        //   this.$message.error("您本地没有指定文件");
        //   // this.$message.warning(res.status);
        // });
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加库的元数据";
    },
    /** 清理按钮操作 */
    handleClear(row) {
      this.reset();
      let data = new FormData();
      data.append("table", row.id);
      data.append("createId", row.createrId);
      clearScckocMeta(data).then((res) => {
        if (res.msg == "操作成功！") {
          this.$message.success("开始清理");
        } else {
          this.$message.error("清理失败");
        }
        this.getList();
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.$router.push({ path: "/inputspace/inputDetail", query: row });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateScckocMeta(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addScckocMeta(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.moveToClear(ids, 0);
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    showDel(item) {
      this.delId = item.id;
      this.delShow = true;
      this.dialogName = item.tableName;
    },
    handleDelete() {
      const ids = this.delId || this.ids;
      delScckocMeta(ids)
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
          this.delId = null;
          this.ids = [];
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有库的元数据数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportScckocMeta(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    addClear(item) {
      listCfg().then((response) => {
        this.cfgList = response.rows;
        console.log("cfgList", this.cfgList);
        console.log("count", this.cfgList[item.schemaId - 1].count);
        console.log("name", this.cfgList[item.schemaId - 1].templateName);
        this.addClearCount = this.cfgList[item.schemaId - 1].count;
        this.addClearName = this.cfgList[item.schemaId - 1].templateName;
      });

      this.open = true;
      this.ids = item.id;
      this.dialogName = item.dataSource;
      this.dialogTableName = item.tableName;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.first-form {
  .el-form-item__label {
    margin-left: 0;
    font-size: 16px;
  }
}
.del-dialogOutIn {
  .el-dialog {
    height: 150px;
    border-radius: 10px;

    &__body {
      padding: 10px 38px 10px 38px;
    }
    &__header {
      padding: 10px 38px 10px 38px;
    }
    &__footer {
      padding: 10px 38px 20px 38px;
    }
  }
  .del-dialogOutIn-Msg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .del-msg {
    font-size: 16px;
    font-weight: 600;
    padding-top: 5px;
  }
  .commit {
    color: #bd4541;
  }
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  font-family: PuHuiTi;
}
::v-deep .mb8 .el-button {
  font-size: 14px;
  font-family: PuHuiTi;
}
.head {
  min-width: 1152px;
  height: 4.8125rem;
  background: #ffffff;
  margin: 0 1.5rem 0.6875rem 0;
  padding: 1.25rem 0.9375rem;
  border-radius: 0.5rem;
}
.caoz {
  margin-left: 10px;
  padding-left: 5px;
  width: 271px;
  float: right;
  .search-btn {
    padding: 0 1.25rem;
    width: 128px;
    height: 2rem;
    color: #ffffff;
    font-family: PuHuiTi;
    background: #bd4541;
    border-radius: 0.25rem;
  }
  .reset-btn {
    padding: 0 1.25rem;
    height: 2rem;
    width: 128px;
    font-size: 14px;
    font-family: PuHuiTi;
    border: 1px solid #eeeeee;
    border-radius: 0.25rem;
  }
}
.caoz1 {
  padding-left: 5px;
  width: 205px;
  float: right;
  .search-btn1 {
    // padding: 0 1.25rem;
    width: 100px;
    height: 2rem;
    font-family: PuHuiTi;
    color: #ffffff;
    background: #4353e4;
    border-radius: 0.25rem;
  }
  .reset-btn1 {
    // padding: 0 1.25rem;
    height: 2rem;
    width: 87px;
    font-size: 14px;
    font-family: PuHuiTi;
    color: #4353e4;
    border: 1px solid #4353e4;
    border-radius: 0.25rem;
  }
}
::v-deep .el-input--small .el-input__inner {
  width: 160px;
  height: 32px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  font-family: PuHuiTi;
  border: 1px solid #eeeeee;
}
::v-deep .el-form .el-button {
  font-size: 14px;
  font-family: PuHuiTi;
  font-weight: 400;
}
.card-list {
  position: relative;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  padding-top: 2.5rem;
  padding-left: 1rem;
  // height: 49.375rem;
  border-radius: 0.25rem;
  background: #ffffff;
}
.card-title {
  position: absolute;
  top: 19px;
  height: 16px;
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.pagination-container {
  background: #f5f5f5;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  .el-pagination {
    // right: 1.3125rem;
    position: absolute;
  }
}

.data-card {
  padding: 14px 18px 0 16px;
  margin-bottom: 13px;
  position: relative;
  width: 320px;
  height: 186px;
  background: #ffffff;
  border-radius: 5px;
  opacity: 1;
  border: 1px solid #f5f5f5;

  .card-img {
    position: absolute;
    right: 18px;
    top: 40px;
    width: 26px;
    height: 26px;
    background: url("./icon.png");
    background-size: cover;
  }
  .el-icon-date {
    width: 14px;
  }
  .dn-card {
    color: #999999;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 0.9375rem;
  }
  .card-state {
    &4 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #f5fff6;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #479706;
      line-height: 24px;
    }
    &5 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff9f5;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ff7c24;
      line-height: 24px;
    }
    &6 {
      width: 145px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8080ff;
      line-height: 24px;
    }
    &9 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #f7f5ff;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8146ff;
      line-height: 24px;
    }
    &10 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ff7c24;
      line-height: 24px;
    }
    &11 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      line-height: 24px;
    }
    &12 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #bfbf00;
      line-height: 24px;
    }
    &13 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #7b4d12;
      line-height: 24px;
    }
    &1 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #f59a23;
      line-height: 24px;
    }
    &2 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #02a7f0;
      line-height: 24px;
    }
  }
  .caozuo {
    position: absolute;
    left: 16px;
    bottom: 13px;
    height: 24px;
    // background-color: #2B40FF;
    .el-link {
      font-size: 18px;
      line-height: 24px;
      height: 24px;
      font-weight: 400;
      margin-right: 5px;
      &.el-link--primary {
        color: #4353e4;
      }
      &.el-link--info {
        color: #cccccc;
      }
      float: right;
      &.el-link--danger {
        color: #bd4541;
      }
    }
  }
}

.del-dialog {
  ::v-deep .el-dialog {
    height: 270px;
    border-radius: 10px;
    &__body {
      padding: 10px 38px 10px 38px;
    }
    &__header {
      padding: 10px 38px 10px 38px;
    }
    &__footer {
      padding: 10px 38px 20px 38px;
    }
  }
  .del-img {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    background: url("../../../assets/images/warnning.png");
    background-size: cover;
  }
  .del-msg {
    margin-top: 37px;
    text-align: center;

    .msg1 {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      span {
        color: #bd4541;
      }
    }
    .msg2 {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 400;
      color: #bd4541;
    }
    .msg3 {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      span {
        color: #bd4541;
      }
    }
  }
}
.dialog-footer {
  .cancel {
    border: 0;
    height: 31px;
    font-size: 14px;
    padding: 0 10px;
    font-weight: 400;
    color: #666666;
  }
  .commit {
    width: 128px;
    height: 31px;
    font-size: 14px;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    // line-height: 31px;
    background: #bd4541;
    border-radius: 4px;
    border: 0;
  }
}
.file-input {
  .tilite_style {
    margin-left: 90px;
    margin-bottom: 5px;
    font-size: 12px;
    color: rgb(197, 197, 197);
  }
  ::v-deep .el-dialog {
    height: 540px;
    border-radius: 10px;
    &__body {
      height: 360px;
      padding: 10px 38px 10px 38px;
    }
    &__header {
      padding: 33px 38px 10px 38px;
    }
    &__footer {
      padding: 30px 38px 20px 38px;
    }
  }

  ::v-deep .el-form-item {
    height: 31px;
    margin-bottom: 25px;
    &__label {
      margin-right: 15px;
      height: 31px;
      font-size: 14px;
      font-family: PuHuiTi;
      font-weight: 400;
      color: #999999;
    }
    .el-input {
      width: 100px;
      height: 31px;
      &__inner {
        width: 100px;
        height: 31px;
      }
    }
    .el-select {
      width: 104px;
      height: 31px;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      .el-input {
        &--suffix {
          width: 104px;
        }
        &__inner {
          width: 104px;
        }
        &__icon {
          height: 40px;
        }
      }
      // .el-input__icon {
      //   height: 31px;
      // }
    }

    .md {
      width: 240px;
      height: 31px;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      .el-input {
        &--suffix {
          width: 240px;
        }
        &__inner {
          width: 240px;
        }
        &__icon {
          height: 40px;
        }
      }
    }
  }
  .upload-demo {
    width: 110px;
    height: 32px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px dashed #2764ff;
    font-size: 14px;
    font-family: PuHuiTi;
    font-weight: 400;
    color: #2764ff;
  }

  .uploadData {
    // border: 1px ridge red;
    margin-left: 10px;
    text-align: center;
  }
  .file-name {
    margin-left: 15px;
    font-size: 14px;
    font-family: PuHuiTi;
    font-weight: 400;
    color: #333333;
  }
  .file-table {
    width: 407px;
    padding: 0;
    margin-left: 15px;
    border-radius: 6px;
    border: 1px solid #eeeeee;
    ::v-deep .el-table {
      font-size: 14px;
      font-family: PuHuiTi;
      font-weight: 400;
      line-height: 14px;
      color: #333333;
      // overflow-y: auto;
      .el-table__footer-wrapper,
      .el-table__header-wrapper {
        height: 32px;
      }
    }
  }
}

.connect-dialog {
  ::v-deep .el-dialog {
    height: 487px;
    border-radius: 10px;
    &__body {
      height: 300px;
      padding: 10px 38px 10px 38px;
    }
    &__header {
      padding: 33px 38px 10px 38px;
    }
    &__footer {
      padding: 30px 38px 20px 38px;
    }
    .el-step:last-of-type.is-flex {
      width: 150px;
    }
    .el-step.is-horizontal .el-step__line {
      left: 170px;
      width: 64px;
    }
    .el-step__head {
      &.is-process {
        border: 0;
        color: #ffffff;
        .el-step__line {
          background-color: #dddddd;
        }
        .el-step__icon.is-text {
          border: 0;
          background: #bd4541;
        }
      }
      &.is-wait {
        border: 0;
        color: #ffffff;
        .el-step__line {
          background-color: #dddddd;
        }
        .el-step__icon.is-text {
          border: 0;
          background: #dddddd;
        }
      }
      &.is-success {
        color: #bd4541;
        border-color: #bd4541;
        .el-step__line {
          background-color: #bd4541;
        }
        .el-step__icon.is-text {
          background: #ffffff;
        }
      }
    }

    .el-step__main {
      position: absolute;
      top: -6px;
      left: 30px;
      height: 24px;
      .el-step__title {
        &.is-process {
          font-size: 14px;
          font-family: PuHuiTi;
          font-weight: 400;
          color: #333333;
        }
        &.is-wait {
          font-size: 14px;
          font-family: PuHuiTi;
          font-weight: 400;
          color: #cccccc;
        }
        &.is-success {
          font-size: 14px;
          font-family: PuHuiTi;
          font-weight: 400;
          color: #bd4541;
        }
      }
    }
  }
  .cd-body {
    margin: 24px 0 0 0;
    padding: 0;
    height: 100%;
    .cd {
      margin-bottom: 29px;
      span {
        display: inline-block;
        width: 90px;
        text-align: right;
        font-size: 14px;
        font-family: PuHuiTi;
        font-weight: 400;
        color: #999999;
      }
      ::v-deep .el-select {
        margin-left: 15px;
        width: 306px;
        height: 31px;
        border-radius: 5px 5px 5px 5px;
        opacity: 1;
      }
      ::v-deep .el-input__inner {
        width: 306px;
        height: 31px;
        border-radius: 5px 5px 5px 5px;
        opacity: 1;
        border: 1px solid #eeeeee;
        padding: 6px 9px;
      }
      ::v-deep .el-input__icon {
        height: 29px;
      }
      .file-name {
        width: 306px;
        margin-left: 15px;
        text-align: left;
        font-size: 14px;
        font-family: PuHuiTi;
        font-weight: 400;
        color: #333333;
      }
    }
    .cd-table1 {
      width: 677px;
      height: 267px;
      border-radius: 6px;
      opacity: 1;
      overflow: auto;
      border: 1px solid #eeeeee;
    }
    .cd-table2 {
      width: 475px;
      height: 260px;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      overflow: auto;
      border: 1px solid #eeeeee;
    }
  }

  .over_style {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

// .MsgeError_style {
//   div {
//     font-size: 14px;
//     border-radius: 20px;
//   }
//   // color: red;
//   span {
//     font-size: 18px;
//     color: rgb(199, 59, 59);
//   }
// }

.del-dialog {
  ::v-deep .el-dialog {
    height: 230px;
  }
  ::v-deep .el-dialog__title {
    font-size: 20px;
    color: #333333;
    font-weight: 700;
  }
  .del-img {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    background: url("../../../assets/images/warnning.png");
    background-size: cover;
  }
  .del-msg {
    margin-top: 14px;
    text-align: left;
    .msg1 {
      text-align: center;
      font-size: 16px;
      color: #333333;
      span {
        color: #bd4541;
      }
    }
    .msg3 {
      text-align: center;
      font-size: 16px;
      span {
        color: #bd4541;
      }
    }
  }
}
</style>
